import React, { useState, useContext, createContext, useReducer } from 'react'

const reducer = (state, { type }) => {
    const obj = { ...state }
    switch(type) {
        case "CHANGE_NAME":
            obj.name = "李四"
            return obj
    }
}

const initState = {
    name: "张三",
    age: 20
}
// useReducer(函数, 初始值)

function About() {
    const [state, dispatch] = useReducer(reducer, initState)
    console.log(state)

    return (
        <div>
            <h4>我是About</h4>
            <h3>
                我是姓名是：{ state.name }
            </h3>
            <button onClick={() => {
                dispatch({ type: "CHANGE_NAME" })
            }}>修改姓名</button>
        </div>
    )
}








// const Context = createContext()

// function About() {
//     const [count] = useState(888)
//     return (
//         <div>
//             <h4>我是About</h4>
//             <Context.Provider value={count}>
//                 <Son/>
//             </Context.Provider>
//         </div>
//     )
// }

// function Son() {
//     const count = useContext(Context)
//     return (
//         <div>
//             <h4>
//                 我是Son -- { count }
//             </h4>
//         </div>
//     )
// }


export default About
